<template>
  <view class="l-content">
    <view :style="{height:props.height}" class="l-page">
      <view>
        <view class="l-login">
          <Card
              :elevation="'5px'"
              :index="0"
              :padding="['20px','20px','20px','20px']"
              :title="'欢迎登录'"
              headerBackground="#c6c3d8"
              src="https://yanglelelele.vip/myblog/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220823105924.jpg"
          >
            <template #default>
              <view class="l-body">
                <u--form>
                  <u-form-item
                      label="账号"
                      prop="username"
                  >
                    <u--input v-model="state.form.username"/>

                  </u-form-item>
                  <u-form-item
                      label="密码"
                      prop="password"
                  >
                    <u--input v-model="state.form.password" type="password"/>
                  </u-form-item>
                </u--form>
              </view>


            </template>
            <template #footer>
              <u-button color="linear-gradient(#8ba7d5, #d6c7d8)" text="登录" type="primary" @click="loginMe"></u-button>

            </template>

          </Card>

        </view>
      </view>
    </view>
  </view>

</template>

<script setup>
import {defineProps, reactive} from "vue";
import {login} from "@/pages/api/user/user"
import Card from "@/components/Card";
import {useStore} from '@/pinia/user'

const props = defineProps({
  height: {
    default: () => '100vh',
    type: String
  }
})

const store = useStore();
const state = reactive({
  form: {
    username: '',
    password: ''

  }

})
const loginMe = () => {
  login(state.form).then(res=>{
    if (res['code'] === 20000) {
      store.saveToken(res['data']['token'])
      uni.showToast({
        title:"登录成功",
        icon:"success"
      })
      store.saveUserInfo(res['data'])
      uni.switchTab({
        url:"/pages/message/index"
      })
    }


  }).catch(err=>{
    console.error("err",err)

  })
}

</script>

<style lang="scss" scoped>
.l-content {
  .l-page {
    background-image: url("https://yanglelelele.vip/myblog/%E7%88%B1%E6%80%9D%E5%A3%81%E7%BA%B8_575035.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .l-login {
      padding: 0 60 rpx;
      .l-body{
        padding: 0 20rpx;

      }
    }
  }
}

</style>
